<template>
  <ul class="todo-main">
        <li>
          <label>
            <input type="checkbox" :checked="itemObj.done" @click="checkId(itemObj.id)"/>
            <!-- 利用双向绑定来实现，本身就是true和false,并且初始化和改变时都能联动,但是不建议修改对象中的属性，要整个对象一起修改 -->
            <!-- <input type="checkbox" v-model="itemObj.done"/> -->
            <span>{{itemObj.title}}</span>
          </label>
          <button class="btn btn-danger" style="display:block;" @click="handDetele">删除</button>
        </li>
      </ul>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  props: ['itemObj'],
  methods: {
    checkId (id) {
      console.log('看看谁被选中了', id)
      // this.checkTodo(id)
      // 给总线发数据过去
      // this.$bus.$emit('checkTodo', id)
      pubsub.publish('checkTodo', id)
    },
    handDetele (id) {
      if (confirm('确定删除？')) {
        // this.deteleTodo(id)
        // 给总线发数据过去
        // this.$bus.$emit('deteleTodo', id)
        pubsub.publish('deteleTodo', id)
      }
    }
  }
}
</script>

<style>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover{
  background-color: #ddd;
}
li:hover button{
  display: block;
}
</style>
